<template>
    <Header />
    <div class="header_main">
        <div class="banner"></div>
        <div class="header-userInfo">
            <div class="user-avatar">
                <img alt="" class="user-avatar-photo" v-if="user_info.user_avatar && user_infoStore.userToken" :src="user_info.user_avatar">
                <svg v-if="!user_infoStore.userToken" t="1719544528829" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="4643" width="120" height="120"><path d="M1023.464334 512.079668A511.504397 511.504397 0 1 1 325.652931 35.993758a500.49811 500.49811 0 0 1 372.741992 0A511.472402 511.472402 0 0 1 1023.464334 512.079668M315.414524 404.576398a225.436916 225.436916 0 0 0 108.143171 197.089328 176.7085 176.7085 0 0 0 174.052913 1.599751 224.477066 224.477066 0 0 0 111.022722-198.689079 197.985189 197.985189 0 1 0-393.218806 0m198.369129 585.50888a475.062068 475.062068 0 0 0 370.182391-175.972614c-10.238407-85.106755-93.10551-157.095552-209.567386-193.249926a238.13894 238.13894 0 0 1-327.309063-2.879552c-113.902274 32.314971-197.409278 98.544664-216.926241 177.892316a476.021919 476.021919 0 0 0 383.620299 194.529726" fill="#C0C5CF" p-id="4644"></path></svg>
                <svg v-if="!user_info.user_avatar && user_infoStore.userToken" t="1719544828412" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="4801" width="120" height="120"><path d="M1023.464334 512.079668A511.504397 511.504397 0 1 1 325.652931 35.993758a500.49811 500.49811 0 0 1 372.741992 0A511.472402 511.472402 0 0 1 1023.464334 512.079668M315.414524 404.576398a225.436916 225.436916 0 0 0 108.143171 197.089328 176.7085 176.7085 0 0 0 174.052913 1.599751 224.477066 224.477066 0 0 0 111.022722-198.689079 197.985189 197.985189 0 1 0-393.218806 0m198.369129 585.50888a475.062068 475.062068 0 0 0 370.182391-175.972614c-10.238407-85.106755-93.10551-157.095552-209.567386-193.249926a238.13894 238.13894 0 0 1-327.309063-2.879552c-113.902274 32.314971-197.409278 98.544664-216.926241 177.892316a476.021919 476.021919 0 0 0 383.620299 194.529726" fill="#1296db" p-id="4802"></path></svg>
                <span class="user-avatar-authSubscript"
                    style="background-position:35px -15px;width:28px;height:28px;"></span>
                <div v-if="avatar_masker" class="avatar_masker">{{masker_title}}</div> 


            </div>
            <div class="user-basic">
                <div class="user-basic-info">
                    <div class="user-basic-info-name">
                        <span class="user-name">{{ user_info.nickname }}</span>
                        <span class="user-level">{{user_info.level_name}} {{ $t('vip') }}</span>
                    </div>
                    <div class="user-basic-info-uid">
                        <span class="user-item">
                            <span class="user-uid-icon">UID</span>
                            <span>{{ user_info.id }}</span>

                            <span v-if="user_info.status" class="user-uid-icon formal">{{ $t('official_users') }}</span>
					        <span v-if="!user_info.status" @click="visible = true" class="user-uid-icon tourist">{{ $t('bind_account') }}</span>
                        </span>
                        <span class="user-item">
                            <span class="user-uid-icon money">{{ $t('Y_coin') }}</span>
                            <span>{{ user_info.money }}</span>
                        </span>
                        <span class="user-item">
                            <span class="user-uid-icon integral">{{ $t('integral') }}</span>
                            <span>{{ user_info.integral }}</span>
                        </span>
                    </div>
                </div>
                <div class="user-basic-nav">
                    <ul class="user-nav">
                        <li @click="$router.push('/userCenter')" :class="{ active: $route.path === '/userCenter' }">
                            <span class="iconfontH iconic_pc_me_home">
                                <svg t="1718879189264" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="29084" width="20" height="20"><path d="M997.3 456.4l-419-428.5c-36.4-37.3-96.1-37.3-132.5 0l-419 428.5c-57 58.3-16.6 158 64 158h62.9v307.2c0 56.6 45.8 102.4 102.4 102.4h153.6V768c0-28.3 22.9-51.2 51.2-51.2h102.4c28.3 0 51.2 22.9 51.2 51.2v256H768c56.6 0 102.4-45.8 102.4-102.4V614.4h62.9c80.6 0 121-99.7 64-158z" fill="#00a2ff" p-id="29085"></path></svg>
                            </span>
                            <span>{{ $t('Personal_homepage') }}</span>
                        </li>
                        <li @click="$router.push('/userCenter/modifyingInformation')" :class="{ active: $route.path === '/userCenter/modifyingInformation' }">
                            <span class="iconfontH iconic_pc_me_game">
                                <span><svg t="1718943633780" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="8539" width="20" height="20"><path d="M960.284444 200.248889v623.502222H63.715556V200.248889h896.568888M1012.622222 147.911111H11.377778v728.177778h1001.244444V147.911111z" fill="#37ADDB" p-id="8540"></path><path d="M564.679111 615.879111h237.112889v52.337778H564.679111zM564.679111 485.831111h316.188445v52.337778H564.679111zM564.679111 355.783111h316.188445v52.337778H564.679111zM343.722667 374.442667a59.505778 59.505778 0 1 1-60.984889 59.505777 60.302222 60.302222 0 0 1 60.984889-59.505777m0-52.337778a111.843556 111.843556 0 1 0 113.208889 111.843555 112.64 112.64 0 0 0-113.208889-111.843555z" fill="#37ADDB" p-id="8541"></path><path d="M527.928889 701.895111h-52.337778a131.982222 131.982222 0 0 0-263.850667 0H159.288889a184.32 184.32 0 0 1 368.526222 0z" fill="#37ADDB" p-id="8542"></path></svg></span>
                            </span>
                            <span>{{ $t('user_info') }}</span>
                        </li>
                        <li  @click="$router.push('/userCenter/giftPack')" :class="{ active: $route.path === '/userCenter/giftPack' }" >
                            <span class="iconfontH iconic_pc_me_game">
                                <svg t="1718879160479" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="27131" width="20" height="20"><path d="M918 465.428c0-20.656-16.772-37.428-37.428-37.428H143.428c-20.656 0-37.428 16.772-37.428 37.428v421.144c0 20.656 16.772 37.428 37.428 37.428h737.144c20.656 0 37.428-16.772 37.428-37.428V465.428z" fill="#FF545C" p-id="27132"></path><path d="M918 450.94a22.952 22.952 0 0 0-22.94-22.94h-258.12a22.952 22.952 0 0 0-22.94 22.94V924h281.06a22.952 22.952 0 0 0 22.94-22.94v-450.12z" fill="#F2044B" p-id="27133"></path><path d="M512 344s28.88-69.792 28-156c-0.88-86.208-16.816-88-48-88H344s-68 8.62-68 92 45.152 120 64 140 172 12 172 12z" fill="#FECB31" p-id="27134"></path><path d="M484.344 345.036C450.032 318.656 428 277.812 428 232c0-57.524 34.74-107.212 84.904-130.276 17.436 4.692 26.44 22.072 27.096 86.276 0.88 86.208-28 156-28 156s-11.084 0.58-27.656 1.036z" fill="#FF9058" p-id="27135"></path><path d="M321.968 311.328s-3.164-23.828-17.14-47.436-18.652-21.564-27.244-16.596l-40.772 23.58s-17.356 13.208-4.072 36.176c13.28 22.972 31.556 25.864 39.932 28.372 8.38 2.508 49.296-24.096 49.296-24.096z" fill="#FECE27" p-id="27136"></path><path d="M314.516 316.02c-13.656-1.804-26.232-9.544-33.532-22.164-9.164-15.848-7.512-35.068 2.636-49.416 5.548-1.484 10.8 1.868 21.208 19.452 13.976 23.608 17.14 47.436 17.14 47.436s-2.96 1.924-7.452 4.692z" fill="#FF9058" p-id="27137"></path><path d="M548 316s0-168 68-168h140s36 13.664 36 68-84 116-84 116l-160-16z" fill="#FECA34" p-id="27138"></path><path d="M596.116 320.812L548 316s0-156.916 61.38-167.444c23.128 7.94 35.776 25.676 38.62 51.444 2.604 23.592-29.504 83.476-51.884 120.812z" fill="#FF9058" p-id="27139"></path><path d="M702.748 295.644s38.988-60.06 63.296-44.28l50.052 32.492s9.7 13.24-2.912 32.664c-12.608 19.428-56.948 21.976-56.948 21.976l-53.488-42.852z" fill="#FECE27" p-id="27140"></path><path d="M718.832 308.532l-16.084-12.888s36.416-56.1 60.804-45.616c6.424 8.204 6.828 17.48 1.864 27.352-4.544 9.04-29.92 22.996-46.584 31.152z" fill="#FF9058" p-id="27141"></path><path d="M964 336.564A32.58 32.58 0 0 0 931.436 304H92.564A32.58 32.58 0 0 0 60 336.564v118.872A32.58 32.58 0 0 0 92.564 488h838.872a32.58 32.58 0 0 0 32.564-32.564V336.564z" fill="#FF4C77" p-id="27142"></path><path d="M300 304h120v620H300z" fill="#FFC735" p-id="27143"></path><path d="M964 336.564A32.58 32.58 0 0 0 931.436 304h-316.684v184h316.684a32.58 32.58 0 0 0 32.564-32.564V336.564z" fill="#F00048" p-id="27144"></path><path d="M704 304h120v620h-120z" fill="#FFC735" p-id="27145"></path><path d="M106 488h812v64h-812z" fill="#E30000" fill-opacity=".4" p-id="27146"></path></svg>
                            </span>
                            <span>{{ $t('my_gift') }}</span>
                        </li>
                        <!-- <li  @click="$router.push('/userCenter/pointsLottery')" :class="{ active: $route.path === '/userCenter/pointsLottery' }" >
                            <span class="iconfontH iconic_pc_me_game">
                                <svg t="1727057005785" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="4334" width="20" height="20"><path d="M535.07644 390.860715l-23.911453-116.403452-22.107375 116.131254c-24.092577 4.331629-47.192552 15.790543-65.871872 34.379812-48.546378 48.637452-48.546378 127.322064 0 175.867419 48.547402 48.546378 127.322064 48.546378 175.867419 0 48.637452-48.637452 48.637452-127.322064 0-175.867419-18.135947-18.13697-40.514496-29.596908-63.975697-34.109661L535.07644 390.860715zM836.273557 837.960979 836.273557 837.960979 631.513261 633.200683c-21.93853 21.93853-48.369347 36.564558-76.26246 44.085813l75.007895 279.87359c-38.33896 10.238117-78.352039 15.462064-119.094731 15.462064s-80.650371-5.3273-118.990355-15.462064l75.007895-279.87359c-27.99749-7.416879-54.322907-22.14626-76.26246-44.085813L186.160794 837.960979c-59.130371-59.130371-98.829297-130.585368-118.884955-206.117192l279.663814-74.905565c-7.728985-28.833526-7.728985-59.234747 0-88.068273L67.274816 393.966431c20.056681-75.531824 59.652254-146.988868 118.782625-206.117192l204.760296 204.760296c21.937507-21.93853 48.263947-36.564558 76.26246-44.085813L392.176679 68.649108c38.33896-10.132717 78.245616-15.460017 118.990355-15.460017 40.742692 0 80.650371 5.3273 119.094731 15.460017l-75.009941 279.874614c27.893113 7.416879 54.324954 22.14626 76.263484 44.085813l204.760296-204.762343c57.982228 57.982228 98.618497 128.811989 119.199108 206.014862l-279.977967 75.007895c7.731032 28.833526 7.731032 59.234747 0 88.068273l279.874614 75.009941c-20.580611 77.202873-61.115573 148.033657-119.094731 206.012815L836.273557 837.960979zM872.643688 151.477062C776.036999 54.973726 647.740753 1.814311 511.164987 1.814311c-136.476506 0-264.872012 53.159415-361.376371 149.661727C53.182951 247.981421 0.024559 376.379996 0.024559 512.853432c0 136.576789 53.159415 264.872012 149.764057 361.478701 96.504359 96.605666 224.902934 149.661727 361.376371 149.661727 136.576789 0 264.872012-53.159415 361.478701-149.661727 96.604642-96.504359 149.661727-224.902934 149.661727-361.478701C1022.305415 376.376926 969.146 247.981421 872.643688 151.477062" fill="#d81e06" p-id="4335"></path></svg>
                            </span>
                            <span>{{ $t('Points_lottery') }}</span>
                        </li> -->
                        <!-- <li  @click="$router.push('/userCenter/pointsMall')" :class="{ active: $route.path === '/userCenter/pointsMall' }" >
                            <span class="iconfontH iconic_pc_me_game">
                                <svg t="1728442556780" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="5221" width="20" height="20"><path d="M944.639639 146.28994l49.066626 731.391391A146.630989 146.630989 0 0 1 846.762388 1023.999431H161.13807A146.5741 146.5741 0 0 1 14.222637 877.681331L63.232374 146.28994A146.5741 146.5741 0 0 1 210.147807 0.000284h587.633288a146.545656 146.545656 0 0 1 146.8301 146.289656zM207.388698 217.656992a299.263751 299.263751 0 1 0 598.555946 0 40.817744 40.817744 0 0 0-81.635488 0 217.685152 217.685152 0 1 1-435.313415 0 40.817744 40.817744 0 0 0-81.607043 0z" fill="#579AFF" p-id="5222"></path></svg>
                            </span>
                            <span>{{ $t('Points_Mall') }}</span>
                        </li> -->
                        <li @click="$router.push('/userCenter/Gamed')" :class="{ active: $route.path === '/userCenter/Gamed' }">
                            <span class="iconfontH iconic_pc_me_mycmt">
                               <svg t="1718879121239" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="25319" width="20" height="20"><path d="M679.408 689.376c-24.032-28.336-89.52-94.8-175.104-94.8-67.008 0-115.28 38.064-142.48 67.312a581.184 581.184 0 0 1-24.976 31.824l-0.752 1.216-1.76 1.744c-46.96 54.784-100.112 93.6-145.152 86.48-103.04-16.32-92.4-222.112-48.8-358.8s99.296-179.84 184.496-166.352c4.768 0.752 9.456 1.76 14.064 2.992 68.992 10.224 86.304 27.712 165.36 27.712 77.488 0 150.832-22.48 176.88-28.048 4.128-1.088 8.336-1.984 12.624-2.656 85.216-13.488 140.896 29.648 184.496 166.352 43.6 136.704 54.24 342.48-48.8 358.8-43.072 6.816-92.608-27.808-136.896-78.112-1.072-1.024-2.16-2.048-3.232-3.104 0 0-1.632-2.288-4.752-6.208a525.808 525.808 0 0 1-5.216-6.352zM297.52 513.312a78.64 78.64 0 1 0 0-157.28 78.64 78.64 0 0 0 0 157.28z" fill="#95EAFF" p-id="25320"></path><path d="M314.112 170.912h-68.816c-36.208 0-67.632 20.288-67.632 49.376v44.496h32v-44.496c0-7.744 14.928-17.376 35.632-17.376h68.816c20.72 0 35.632 9.648 35.632 17.376v44.496h32v-44.496c0-29.056-31.392-49.376-67.632-49.376zM674.272 220.24c0-7.76 14.928-17.408 35.632-17.408h68.816c20.72 0 35.632 9.648 35.632 17.408v44.528h32v-44.528c0-29.072-31.392-49.408-67.632-49.408h-68.816c-36.208 0-67.632 20.304-67.632 49.408v44.528h32v-44.528z" fill="#49A3FE" p-id="25321"></path><path d="M752 384m-32 0a32 32 0 1 0 64 0 32 32 0 1 0-64 0Z" fill="#49A3FE" p-id="25322"></path><path d="M688 448m-32 0a32 32 0 1 0 64 0 32 32 0 1 0-64 0Z" fill="#49A3FE" p-id="25323"></path><path d="M816 448m-32 0a32 32 0 1 0 64 0 32 32 0 1 0-64 0Z" fill="#49A3FE" p-id="25324"></path><path d="M752 512m-32 0a32 32 0 1 0 64 0 32 32 0 1 0-64 0Z" fill="#49A3FE" p-id="25325"></path><path d="M589.824 544h-52.768a16 16 0 0 0 0 32h52.768a16 16 0 0 0 0-32zM468.928 544H416a16 16 0 0 0 0 32h52.928a16 16 0 0 0 0-32z" fill="#49A3FE" p-id="25326"></path><path d="M937.2 423.568c-49.6-155.488-116.8-214.112-224.224-197.104-5.312 0.848-10.544 1.936-15.712 3.296-2.864 0.592-45.072 11.072-62.304 14.848-46.848 10.24-89.888 16.016-131.568 16.016-40.24 0-65.04-3.536-99.536-12.416-3.088-0.8-20.128-5.296-25.312-6.608a549.52 549.52 0 0 0-57.696-11.776 170.336 170.336 0 0 0-15.76-3.36c-107.408-17.008-174.624 41.6-224.224 197.104C17.952 620.832 31.92 827.344 148.24 845.76c53.808 8.528 115.744-30.608 177.088-102.16a18.24 18.24 0 0 0 3.584-4.208l-0.032-0.016a666.384 666.384 0 0 0 27.168-34.608c39.824-42.64 89.184-69.824 147.344-69.824 71.088 0 134.8 42.704 183.76 100.432 1.76 2.176 3.76 4.608 5.776 7.008 2.192 2.752 3.808 4.912 4.544 5.952l1.904 2.208 3.76 3.616c56.752 64.56 114.992 99.792 166.704 91.6 116.32-18.416 130.288-224.928 67.36-422.192z m-72.352 390.592c-37.856 6-87.488-24.016-138.688-82.192a356.768 356.768 0 0 0-3.568-3.488 194.144 194.144 0 0 0-4.88-6.336c-2.128-2.56-4.032-4.848-5.92-7.184-54.688-64.48-125.584-112.016-208.4-112.016-68.528 0-125.76 31.616-171.168 80.432a717.28 717.28 0 0 1-28.464 36.176l-1.168 1.584-0.624 0.608c-55.696 64.88-109.168 98.672-148.736 92.4-86.544-13.712-99.2-201.12-41.872-380.864 45.312-142.048 99.536-189.344 188.72-175.216 4.752 0.752 9.456 1.76 14.08 3.008 21.12 3.232 37.232 6.624 56.464 11.536 5.008 1.28 22 5.76 25.232 6.592 36.96 9.52 64.384 13.44 107.52 13.44 44.32 0 89.504-6.08 138.4-16.768 17.84-3.904 59.968-14.352 62.896-14.992 4.848-1.264 9.04-2.144 13.28-2.816 89.184-14.128 143.424 33.168 188.72 175.216 57.376 179.76 44.704 367.168-41.824 380.88z" fill="#0F13AE" p-id="25327"></path><path d="M863.616 728.88a44.16 44.16 0 0 1-15.648 5.536 50.08 50.08 0 0 1-20.976-1.488c-23.376-6.24-50.88-26.848-78.704-58.448-1.248-1.248-2-1.968-2.64-2.592a146.368 146.368 0 0 0-3.536-4.576l-4.432-5.376a16 16 0 1 0-24.848 20.144c1.504 1.856 3.008 3.68 4.512 5.472 1.52 1.92 2.688 3.456 3.2 4.176l1.904 2.208c0.944 0.928 1.904 1.824 2.848 2.72 30.592 34.864 62.816 58.976 93.456 67.168a82.128 82.128 0 0 0 34.24 2.176 75.904 75.904 0 0 0 26.896-9.568 16 16 0 1 0-16.272-27.552zM282.672 666.064c-0.432 0.576-0.32 0.448-0.448 0.576a351.184 351.184 0 0 1-33.504 34.368c-28.416 24.992-54.112 36.528-73.872 33.392a43.632 43.632 0 0 1-22.416-10.432 16 16 0 0 0-21.056 24.096 75.648 75.648 0 0 0 38.448 17.936c31.168 4.944 65.152-10.304 100.016-40.976a364.992 364.992 0 0 0 35.712-36.544 23.84 23.84 0 0 0 2.784-3.328 16 16 0 1 0-25.664-19.088z" fill="#0F13AE" p-id="25328"></path><path d="M689.28 641.232m-17.232 0a17.232 17.232 0 1 0 34.464 0 17.232 17.232 0 1 0-34.464 0Z" fill="#0F13AE" p-id="25329"></path><path d="M113.28 689.232m-17.232 0a17.232 17.232 0 1 0 34.464 0 17.232 17.232 0 1 0-34.464 0Z" fill="#0F13AE" p-id="25330"></path><path d="M294.4 419.2V400a16 16 0 0 0-32 0v19.2H240a16 16 0 0 0 0 32h22.4V480a16 16 0 0 0 32 0v-28.8H320a16 16 0 0 0 0-32h-25.6z" fill="#0F13AE" p-id="25331"></path><path d="M280 336a104 104 0 1 0 0 208 104 104 0 0 0 0-208z m0 176a72 72 0 1 1 0-144 72 72 0 0 1 0 144z" fill="#0F13AE" p-id="25332"></path></svg>
                            </span>
                            <span>{{ $t('my_game') }}</span>
                        </li>
                        <!-- <li @click="$router.push('/userCenter/evaluate')" :class="{ active: $route.path === '/userCenter/evaluate' }">
                            <span class="iconfontH iconic_pc_star_full">
                                <svg t="1718879091593" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="24092" width="20" height="20"><path d="M836.152889 175.995259a75.851852 75.851852 0 0 1 75.851852 75.851852v424.296296a75.851852 75.851852 0 0 1-75.851852 75.851852H612.788148l-69.726815 99.612445a37.925926 37.925926 0 0 1-6.674963 7.30074l-2.654814 2.029037a37.925926 37.925926 0 0 1-50.915556-6.845629l-1.896296-2.465185-69.726815-99.631408H187.847111a75.851852 75.851852 0 0 1-75.851852-75.851852V251.847111a75.851852 75.851852 0 0 1 75.851852-75.851852h648.305778zM512 415.990519A47.995259 47.995259 0 1 0 512 512a47.995259 47.995259 0 0 0 0-96.009481z m-192 0a47.995259 47.995259 0 1 0 0 96.009481 47.995259 47.995259 0 0 0 0-96.009481z m384 0a47.995259 47.995259 0 1 0 0 96.009481 47.995259 47.995259 0 0 0 0-96.009481z" fill="#FEA917" p-id="24093"></path></svg>
                            </span>
                            <span>評價</span>
                        </li> -->
                        <li @click="$router.push('/userCenter/IntegralRecord')" :class="{ active: $route.path === '/userCenter/IntegralRecord' }">
                            <span class="iconfontH iconic_pc_star_score">
                                <svg t="1718878990230" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="18378" width="20" height="20"><path d="M666.770286 1024c-144.457143 0-274.724571-85.065143-330.020572-215.478857a343.332571 343.332571 0 0 1 77.458286-380.489143 363.300571 363.300571 0 0 1 389.266286-75.629714C936.96 406.454857 1024 533.723429 1024 674.962286 1024 867.620571 864.036571 1024 666.770286 1024z m0-605.110857c-144.676571 0-261.924571 114.614857-261.924572 256s117.248 256 261.924572 256 261.997714-114.614857 261.997714-256a253.074286 253.074286 0 0 0-76.8-181.028572 265.069714 265.069714 0 0 0-185.197714-74.971428zM588.946286 286.793143c-26.843429 5.046857-53.101714 12.8-78.262857 23.04a725.869714 725.869714 0 0 1-153.453715 16.018286C159.963429 325.851429 0 252.854857 0 162.889143 0 72.923429 159.963429 0 357.229714 0 554.422857 0 714.386286 72.923429 714.386286 162.889143c0 49.664-48.786286 93.988571-125.44 123.904zM357.229714 93.110857c-144.676571 0-261.997714 31.232-261.997714 69.778286 0 38.546286 117.321143 69.851429 261.997714 69.851428 144.676571 0 261.924571-31.305143 261.924572-69.851428 0-38.546286-117.248-69.778286-261.924572-69.778286zM48.201143 314.148571c25.746286 19.456 54.418286 34.742857 85.065143 45.348572-23.990857 10.605714-38.107429 22.893714-38.107429 36.132571 0 35.547429 99.913143 64.877714 228.937143 69.193143a388.315429 388.315429 0 0 0-43.154286 89.965714C120.393143 538.770286 0 473.6 0 395.556571c2.413714-32.914286 20.187429-62.902857 48.201143-81.481142z m0 232.740572c25.746286 19.382857 54.418286 34.742857 85.065143 45.348571-23.990857 10.605714-38.107429 22.893714-38.107429 36.132572 0 29.696 69.632 54.930286 167.643429 65.097143 1.462857 31.817143 6.729143 63.268571 15.872 93.842285C119.076571 770.925714 0 706.121143 0 628.443429c2.413714-32.914286 20.187429-62.976 48.201143-81.554286z m0 232.740571c25.746286 19.382857 54.418286 34.669714 85.065143 45.348572-23.990857 10.532571-38.107429 22.893714-38.107429 36.132571 0 38.546286 117.321143 69.778286 261.924572 69.778286H358.4c29.769143 34.230857 65.316571 63.195429 105.033143 85.796571-35.108571 4.900571-70.656 7.314286-106.130286 7.314286C159.963429 1024 0 951.076571 0 861.110857c2.413714-32.914286 20.187429-62.902857 48.201143-81.481143z" fill="#FF5522" p-id="18379"></path></svg>
                            </span>
                            <span>{{ $t('points_record') }}</span>
                        </li>
                        <li @click="$router.push('/userCenter/WatchHistory')" :class="{ active: $route.path === '/userCenter/WatchHistory' }">
                            <span class="iconfontH iconic_pc_star_score">
                                <svg t="1745488513487" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="5681" width="20" height="20"><path d="M512 42.666667c259.2 0 469.333333 210.133333 469.333333 469.333333s-210.133333 469.333333-469.333333 469.333333S42.666667 771.2 42.666667 512 252.8 42.666667 512 42.666667z m0 85.333333a384 384 0 1 0 0 768 384 384 0 0 0 0-768z m0 128a42.666667 42.666667 0 0 1 42.368 37.674667L554.666667 298.666667v215.637333l140.202666 125.824a42.666667 42.666667 0 0 1 6.570667 56.021333l-3.328 4.224a42.666667 42.666667 0 0 1-56.021333 6.570667l-4.224-3.328-154.368-138.538667a42.666667 42.666667 0 0 1-13.866667-26.581333L469.333333 533.333333V298.666667a42.666667 42.666667 0 0 1 42.666667-42.666667z" fill="#1296db" p-id="5682"></path></svg>
                            </span>
                            <span>{{ $t('WatchHistory') }}</span>
                        </li>
                        <li @click="$router.push('/recharge')">
                            <span class="iconfontH iconic_pc_star_stored">
                                <svg t="1718881678234" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="35660" width="20" height="20"><path d="M511.970818 0a511.970818 511.970818 0 0 0 0 1023.941635 32.45895 32.45895 0 0 0 3.890978 0 32.45895 32.45895 0 0 0 3.890978 0h444.697852a38.807388 38.807388 0 0 0 27.032059-66.556206l-186.152589-181.032881a38.756191 38.756191 0 1 0-54.064118 55.600031l117.753288 114.425477h-349.164098a32.45895 32.45895 0 0 0-3.890978 0 32.45895 32.45895 0 0 0-3.890978 0 434.048859 434.048859 0 1 1 426.3181-350.648813 38.807388 38.807388 0 1 0 76.181257 14.847154A512.482788 512.482788 0 0 0 511.970818 0z" p-id="35661" fill="#1296db"></path><path d="M530.196979 856.578375a40.957665 40.957665 0 0 0 40.650483-40.650483v-105.721974h111.097667a40.650483 40.650483 0 0 0 0-81.300966h-111.097667v-70.447184h108.384222a40.70168 40.70168 0 0 0 0-81.352163h-108.742602a36.503519 36.503519 0 0 0 5.119708-4.454146l134.136355-134.136354a40.650483 40.650483 0 0 0-57.494323-57.494323l-122.309829 122.361025-127.992704-127.992704a40.650483 40.650483 0 0 0-57.033549 57.699111l134.136354 134.136354a40.292103 40.292103 0 0 0 16.280672 9.881037H381.111077a40.70168 40.70168 0 0 0 0 81.352163h108.435419v70.447184H383.978113a40.650483 40.650483 0 0 0 0 81.300966h105.568383v105.721974a40.957665 40.957665 0 0 0 40.650483 40.650483zM522.619811 476.13286l1.126335 0.767957h-3.430204c0.767956 0 1.535912-0.307182 2.303869-0.767957z" p-id="35662" fill="#1296db"></path></svg>
                            </span>
                            <span>{{ $t('recharge') }}</span>
                        </li>
                    </ul>
                </div>
            </div>
        </div>
    </div>

    <div class="container content_main">
        <div class="left">
            <router-view/>
        </div>
        <div class="right">
            <ContactUs />
        </div>
    </div>
    <Footer />

    <div v-if="isShowLoginStore.isShowLogin">
        <Login :isShowLogin_fn="isShowLogin_fn"/>
    </div>

    <BindAccount :visible="visible" :handleClose='handleClose' :getUserInfo="getUserInfo" :fb_bind_show="fb_bind_show" :yh_bind_show="yh_bind_show" :gg_bind_show="gg_bind_show"/>
    <div v-if="lang == 'zh'">
      <Dialog :title="'faceBook绑定'" :title2="'faceBook是否綁定成功'" :cancel_title="'綁定失敗'" :sub_title="'綁定成功'" :visible="dialog_fb_bind" :handleClose='fb_bind_com' :paySubmit="fb_bind_com"/>
      <Dialog :title="'Yahoo绑定'" :title2="'Yahoo是否綁定成功'" :cancel_title="'綁定失敗'" :sub_title="'綁定成功'" :visible="dialog_yh_bind" :handleClose='yh_bind_com' :paySubmit="yh_bind_com"/>
      <Dialog :title="'Google绑定'" :title2="'Google是否綁定成功'" :cancel_title="'綁定失敗'" :sub_title="'綁定成功'" :visible="dialog_gg_bind" :handleClose='gg_bind_com' :paySubmit="gg_bind_com"/>
    </div>
      
    <div v-if="lang == 'en'">
      <Dialog :title="'facebook binding'" :title2="'Is facebook successfully bound?'" :cancel_title="'Binding failed'" :sub_title="'Binding successful'" :visible="dialog_fb_bind" :handleClose='fb_bind_com' :paySubmit="fb_bind_com"/>
      <Dialog :title="'Yahoo binding'" :title2="'Is Yahoo successfully bound?'" :cancel_title="'Binding failed'" :sub_title="'Binding successful'" :visible="dialog_yh_bind" :handleClose='yh_bind_com' :paySubmit="yh_bind_com"/>
      <Dialog :title="'Google binding'" :title2="'Is Google successfully bound?'" :cancel_title="'Binding failed'" :sub_title="'Binding successful'" :visible="dialog_gg_bind" :handleClose='gg_bind_com' :paySubmit="gg_bind_com"/>
    </div>
</template>

<script setup>
import Login from "@/components/Login/index.vue"
import Header from "@/components/Header/index.vue"  //头部
import Footer from "@/components/Footer/index.vue"  //底部
import ContactUs from "@/components/UserCenter/ContactUs/index.vue"  //联系我们
import { useUserInfoStore } from '@/store/modules/user_info/index';
import { ref,reactive,watchEffect } from "vue";
import BindAccount from "@/components/UserCenter/bindAccount/index.vue"
import {useIsShowLogin} from "@/store/modules/isShowLogin/index.js"
import axios from '@/utils/api'
import Dialog from "@/components/Dialog/index.vue"
const isShowLoginStore = useIsShowLogin();
const isShowLogin_fn = ()=>{
    isShowLoginStore.unShowLogin()
}

const user_infoStore = useUserInfoStore();
let user_info = reactive(user_infoStore.userInfo)
console.log(user_info);

const avatar_masker = ref(0)
const masker_title = ref('')
const userInfo = ref([])
const getUserInfo = async () =>{
    const data = {
        user_id:user_info.id,
    }
    const list = await axios.post('/getUserInfo',data)
    userInfo.value = list.data
    user_infoStore.setUserinfo(list.data.user_info)

    switch(user_info.avatar_check){
        case 1:
            if(lang.value == 'en'){
                masker_title.value = 'Under review'
            }else{
                masker_title.value = '審核中'
            }
            
            avatar_masker.value = 1
            break
        case 2:
            avatar_masker.value = 0
            break	
        case 3:
            if(lang.value == 'en'){
                masker_title.value = 'Rejected'
            }else{
                masker_title.value = '被駁回'
            }
            avatar_masker.value = 1
            break	
    }
}
getUserInfo()

const visible = ref(false)
	
const handleClose = () => {
    visible.value = false
};

let dialog_fb_bind = ref(false)
const fb_bind_show = ()=>{
	dialog_fb_bind.value = true
}
const fb_bind_com = ()=>{
	getUserInfo()
	dialog_fb_bind.value = false
}

let dialog_yh_bind = ref(false)
const yh_bind_show = ()=>{
	dialog_yh_bind.value = true
}
const yh_bind_com = ()=>{
	getUserInfo()
	dialog_yh_bind.value = false
}

let dialog_gg_bind = ref(false)
const gg_bind_show = ()=>{
    dialog_gg_bind.value = true
}
const gg_bind_com = ()=>{
    getUserInfo()
    dialog_gg_bind.value = false
}

watchEffect(() => {
  // 这里可以访问 user_info.avatar_check
  if (user_info.avatar_check) {
    getUserInfo();
  }
});

let lang = ref('')
if(localStorage.getItem('lang') == 'en'){
    lang.value = 'en'
}else{
    lang.value = 'zh'
}
</script>

<style lang="less" scoped>
.header_main {
    position: relative;
    height: 260px;
    .banner {
        width: 100%;
        height: 200px;
        // background: url(https://s1.hdslb.com/bfs/static/game-web/duang/mine/asserts/mine_bg.60a40b0.png);
        background: url(../../assets/banner3.png);
        background-repeat: no-repeat;
        background-size: cover;
        background-position: bottom;
    }

    .header-userInfo {
        position: absolute;
        bottom: 0;
        left: 50%;
        transform: translateX(-50%);
        // width: 1160px;
        display: flex;

        .user-avatar {
            width: 120px;
            height: 120px;
            position: relative;
            border: 4px solid #fff;
            border-radius: 100%;
            background-color: white;
            .user-avatar-photo {
                width: 100%;
                height: 100%;
                border-radius: 100%;
                cursor: pointer;
            }
            .avatar_masker{
                width:100%;
                height: 100%;
                background-color: rgba(#000,.6);
                position: absolute;
                top: 0;
                left: 0;
                border-radius: 50%;
                color: white;
                display: flex;
                align-items: center;
                justify-content: center;
                font-size: 20px;
                cursor: pointer;
                text-align: center;
            }
        }
        .user-basic{
            margin-left: 22px;
            height: 125px;
            .user-basic-info {
                height: 61px;
                .user-basic-info-name {
                    display: flex;
                    align-items: flex-end;
                    padding: 8px 0 6px 0;
                    .user-name {
                        font-size: 24px;
                        color: #fff;
                        line-height: 24px;
                        margin: initial;
                    }
                    .user-level {
                        padding: 2px 8px;
                        height: 18px;
                        margin: 0 0 -2px 10px;
                        background-color: #2da6ff;
                        border-radius: 4px;
                        font-size: 12px;
                        text-align: center;
                        color: white;
                    }
                }
                .user-basic-info-uid {
                    span{
                        margin: initial;
                    }
                    font-size: 14px;
                    color: #fff;
                    line-height: 22px;
                    display: flex;
                    align-items: center;
                    margin-top: 2px;
                    .user-uid-icon {
                        padding: 1px 5px;
                        background: #7dd6fa;
                        border-radius: 5px;
                        font-size: 12px;
                        display: inline-block;
                        line-height: 15px;
                        text-align: center;
                        margin-right: 6px;
                        
                    }
                    .money{
                        background-color: #fa7d7d !important;
                    }
                    .integral{
                        background-color: #7d9efa !important;
                    }
                    .user-item{
                        margin-right: 20px;
                        .tourist{
                            background-color: rgb(208,208,208);
                            color: black;
                            margin-left: 20px;
                            padding: 3px 8px;
                            cursor: pointer;
                        }
                        .tourist:hover{
                            background-color: rgba(208,208,208,.7);
                        }
                        .formal{
                            background-color: rgb(250, 125, 125) !important;
                            margin-left: 10px;
                            padding: 3px 8px;
                        }
                    }
                }
            }
            
            .user-basic-nav {
                display: flex;
                justify-content: space-between;
                width: 1225px;
                margin-top: 10px;
                border-bottom: 1px solid rgba(0, 0, 0, .1);
                .user-nav {
                    display: flex;
                    align-items: center;
                    .active {
                        border-bottom: 2px solid #24b8f2;
                        color: #24b8f2;
                    }
                    li {
                        height: 51px;
                        line-height: 51px;
                        display: flex;
                        align-items: center;
                        margin-right: 34px;
                        font-size: 14px;
                        cursor: pointer;
                        border-bottom: 2px solid #fff;
                        .iconfontH {
                            font-size: 24px;
                            margin-right: 6px;
                        }
                    }
                    li:hover{
                        border-bottom: 2px solid #24b8f2;
                        color: #24b8f2;
                    }
                }
                ul{
                    margin: initial;
                }
            }
        }
    }
}
.container{
    display: flex;
    margin-top: 50px;
    margin-bottom: 50px;
    .left{
        width: 70%;
        .signIn{
            border-bottom: 1px solid rgba(0, 0, 0, .16);
            padding-bottom: 20px;
            .signIn_title{
                font-size: 25px;
                color: #222;
                vertical-align: top;
                display: inline-block;
                margin-left: 10px;
                margin-top: 2px;
            }
            .home-dialiy-exp{
                .home-dialy-exp-item {
                    margin-bottom: 15px;
                    display: inline-block;
                    width: 186px;
                    box-sizing: border-box;
                    padding: 22px 0 0;
                    position: relative;
                    .home-dialy-exp-icon {
                        width: 72px;
                        height: 72px;
                        border-radius: 72px;
                        background: url(https://s1.hdslb.com/bfs/static/jinkela/account/assets/icons_m_2.png) no-repeat;
                        text-align: center;
                        line-height: 72px;
                        color: #fff;
                        margin: 0 auto;
                    }
                    .re-exp-info {
                        font-size: 14px;
                        color: #222;
                        margin-top: 16px;
                        width: 100%;
                        text-align: center;
                    }
                    .re-exp-none {
                        font-size: 12px;
                        color: #99a2aa;
                        margin-top: 16px;
                        width: 100%;
                        text-align: center;
                    }
                    .re-exp-getexp{
                        width: 80px;
                        height: 20px;
                        border-radius: 4px;
                        background-color: #8a95a8;
                        color: #fff;
                        text-align: center;
                        line-height: 19px;
                        margin: 15px auto 0;
                    }
                    .h-line {
                        display: inline-block;
                        position: absolute;
                        top: 54px;
                        right: 0;
                        width: 1px;
                        height: 74px;
                        border-left: 1px solid #e5e9ef;
                    }
                    .position-rest {
                        background-position: -252px -636px;
                    }
                    .position-ok{
                        background-position: -252px -508px;
                    }
                }
            }
        }
        .account_security{
            margin-top: 30px;
            border-bottom: 1px solid rgba(0, 0, 0, .16);
            padding-bottom: 20px;
            .signIn_title{
                font-size: 25px;
                color: #222;
                vertical-align: top;
                display: inline-block;
                margin-left: 10px;
                margin-top: 2px;
            }
            .account_security_main{
                display: flex;
                .h-safe-list {
                    width: 360px;
                    float: left;
                    margin: 24px 22px 10px 0;
                    .h-safe-icon{
                        display: inline-block;
                    }
                    .h-safe-msg {
                        margin-left: 16px;
                        display: inline-block;
                        vertical-align: top;
                        .h-safe-title{
                            font-size: 16px;
                            color: #222;
                            margin-bottom: 8px;
                        }
                        .h-safe-desc {
                            font-size: 12px;
                            color: #99a2aa;
                            margin-bottom: 8px;
                        }
                        .h-safe-nobtn {
                            display: inline-block;
                            height: 24px;
                            line-height: 24px;
                            cursor: default;
                            background-color: #e5e9ef;
                            color: #abb4c1;
                            border-radius: 4px;
                            text-align: center;
                            width: 70px;
                        }
                        .h-safe-a{
                            color: #00a1d6;
                            margin-left: 10px;
                        }
                        .h-safe-btn {
                            cursor: pointer;
                            background-color: #22a1d6;
                            color: #fff;
                            border-radius: 4px;
                            text-align: center;
                            display: inline-block;
                            width: 70px;
                            height: 24px;
                            line-height: 24px;
                        }
                        
                    }
                }
            }
        }
        
    }
    .right{
        width: 30%;
        margin-left: 50px;
        
    }
}
</style>